<script setup lang="ts">

// 组件接口
const props = defineProps({
  cardTitle: {
    type: String,
    default: 'Title'
  },
  cardValue: {
    type: String
  }
})

</script>

<template>
  <div class="PCDTShow_m1">
    <el-card class="PCDTShow_m2">
      <el-space direction="vertical" class="PCDTShow_sp" :prefix-cls="'PCDTShow_sp_item'">
        <span>{{ props.cardTitle }}</span>
        <div class="PCDTShow_div1">
          <el-tag v-if="props.cardValue" type="info"
                  effect="dark" key="props.cardTitle">{{props.cardValue}}</el-tag>
          <el-tag v-else type="info">
            无数据
          </el-tag>
        </div>
      </el-space>
    </el-card>
  </div>
</template>

<style scoped>

.PCDTShow_m1 {
  width: 100%;
  box-sizing: border-box; /* 确保边框和内填充不影响总宽度计算 */

}

.PCDTShow_m2 {
  width: 100%;
  background-image: radial-gradient(circle, #ecf5ff, #545c64)
}

.PCDTShow_sp {
  width: 100%;
}

::v-deep .PCDTShow_sp_item__item {
  width: 100%;
}

.PCDTShow_div1 {
  display: flex;
  justify-content: flex-end;
}

</style>